<template>
	<view>
		<u-navbar title="我的余额" bgColor="#fff" :autoBack="true" placeholder
			titleStyle="font-size:34rpx;font-weight:500;color:#000000;">
		</u-navbar>
		<view class="box p24 flex-align">
			<view class="flex-1">
				<view class="fw-400 fs-14 lh-2 color-fff">账户余额</view>
				<view class="fw-700 fs-30 color-fff pt-4">{{balance || '0.00'}}<span class="fw-400 fs-14 ps-2">元</span>
				</view>
			</view>
			<view class="tx-button fw-400 fs-14 color-fff py-4 px-24 lh-2 br-50" @click="toWithdrawal">提现</view>
		</view>
		<u-sticky :offset-top="$f.sys().top + 44">
			<view class="nav-box flex-align py-10 px-20 bg-fff">
				<view class="flex-align" @click="dateShow = true">
					<view class="fw-500 fs-13 lh-2 color-000 pe-4">{{$f.timeFormat(date, 'yyyy月mm日')}}</view>
					<u-icon name="arrow-down" color="#D2D0CE" size="12"></u-icon>
				</view>
			</view>
		</u-sticky>
		<view class="list">
			<view class="item flex px-16 py-16" v-for="(item,index) in list" :key="index">
				<view class="flex-1">
					<view class="flex-align fs-16 fw-700 lh-2 color-000">
						<view class="flex-1">提现</view>
						<view class="fw-600 fs-16 color-333">-{{ item.withdrawAmount }}</view>
					</view>
					<view class="flex-align pt-4">
						<view class="fw-400 fs-14 lh-2 color-666 flex-1">{{ item.applyTime }}</view>
						<view class="flex-align">
							<view class="fw-400 fs-14 lh-2 color-666 pe-4">{{ getStatusText(item.withdrawStatus) }}
							</view>
							<view class="claim-button fw-400 fs-12 color-fff py-2 px-16 lh-2 br-50"
								v-if="item.withdrawStatus === 4" @click="tx(item.packageInfo)">
								领取
							</view>
						</view>
					</view>
				</view>
			</view>
			<block v-if="kong">
				<view style="height: 200rpx;"></view>
				<u-empty mode=" " text="什么都没有，空空如也～" icon="/static/image/data.png" width="123">
				</u-empty>
			</block>
		</view>
		<!-- 日期选择 -->
		<u-datetime-picker :show="dateShow" v-model="date" :maxDate="maxDate" mode="year-month" title="选择日期"
			:isCustomize="true" @cancel="dateShow=false" @confirm="dateConfirm"></u-datetime-picker>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				dateShow: '',
				date: '',
				list: [],
				kong: false,
				current_page: 1,
				last_page: 1,
				balance: '0.00',
				maxDate:''
			}
		},
		onLoad() {
			this.date = Number(new Date());
			this.maxDate = Number(new Date());
		},
		onReachBottom() {
			this.getList('lower');
		},
		onShow() {
			this.getAccountInfo();
			this.getList('upper');
		},
		methods: {
			// 获取账户信息
			getAccountInfo() {
				this.$api.get({
					url: '/companion/updateInfo/account-info',
					success: res => {
						this.balance = res.accountBalance;
					}
				});
			},
			tx(item) {
				if (wx.canIUse('requestMerchantTransfer')) {
					wx.requestMerchantTransfer({
						mchId: '1718388179',
						appId: 'wx37da07945a141ea8',
						package: item,
						success: (res) => {
							// res.err_msg将在页面展示成功后返回应用时返回ok，并不代表付款成功
							console.log('success:', res);
							this.getList('upper');
						},
						fail: (res) => {
							console.log('fail:', res);
						},
					});
				} else {
					wx.showModal({
						content: '你的微信版本过低，请更新至最新版本。',
						showCancel: false,
					});
				}
			},
			//去提现
			toWithdrawal() {
				uni.navigateTo({
					url: '/pages/mine/withdrawal'
				})
			},
			//获取商品列表
			getList(type) {
				// 判断上拉还是下拉
				if (type === 'upper') {
					this.current_page = 1;
				} else if (type === 'lower') {
					if (this.current_page >= this.last_page) {
						return console.log('真没有了~~');
					} else {
						this.current_page += 1;
					}
				}
				this.$api.get({
					url: '/companion/order/list',
					data: {
						page: this.current_page,
						pageSize: 999,
						queryTime:this.$f.timeFormat(this.date, 'yyyy-mm')
					},
					loadingTip: '加载中...',
					success: res => {
						console.log('列表', res)
						if (type === 'lower') {
							this.list = this.list.concat(res.list);
						} else {
							this.list = res.list;
						}
						if (this.list.length) {
							this.kong = false
						} else {
							this.kong = true
						}
						this.last_page = res.pages; //总页码
					},
					fail: error => {
						console.error('获取失败', error);
					}
				});
			},
			dateConfirm(e) {
				console.log(e)
				this.date = e.value;
				this.dateShow = false;
				this.getList('upper');
			},
			// 获取状态文本
			getStatusText(status) {
				const statusMap = {
					0: '提现中',
					1: '已提现',
					2: '已拒绝',
					3: '提现异常',
					4: '待入账',
					5: '已入账'
				};
				return statusMap[status] || '未知状态';
			}
		}
	}
</script>

<style lang="scss">
	.box {
		background-color: #24C98F;
	}

	.nav-box {
		border-bottom: 1px solid rgba(210, 208, 206, 0.4);

		.line {
			width: 2rpx;
			height: 28rpx;
			background-color: #D2D0CE;
		}
	}

	.item {
		border-bottom: 2rpx dashed #D2D0CE;


		image {
			width: 96rpx;
			height: 96rpx;
			border-radius: 50%;
		}
	}

	.tx-button {
		border: 1px solid #fff;
	}

	.claim-button {
		background-color: #24C98F;
		border: none;
	}
</style>